import React, {useEffect} from 'react';
import Quill from 'quill';
import 'react-quill/dist/quill.snow.css';
import "./quill.css"


/**
 * quill富文本编辑器
 * @param setQuillMaps 存储ecs对象
 * @param setDataLoading
 * @desc
 * 内容回显： document.getElementById('id').children[0].innerHTML = '';
 * 内容获取： document.getElementById('id').children[0].innerHTML;
 * @returns {*}
 * @constructor
 */
const QuillEditor = ({setQuillMaps, setDataLoading}) => {
    //只能使用这种方式，useState()的方式不行
    let quill = {};
  

    useEffect(() => {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        quill = new Quill('#quill-editor', {
            // 设置主题
            theme: 'snow',
            modules: {
                toolbar: {
                    container: [
                        [{'header': [1, 2, false]}],
                        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                        [{'align': []}],
                        [{'color': []}],
                        [{'indent': '-1'}, {'indent': '+1'}],
                        [{'list': 'ordered'}, {'list': 'bullet'}],
                        [{'direction': 'rtl'}],
                        ['link', 'image', 'video'],
                        ['clean']
                    ],
                    handlers: {
                    }
                }
            }
        });
    }, []);

    return (
        <div id="quill-editor"/>
    );
};

export default QuillEditor;

